<template>
  <div class="friends" :style="`margin-bottom: 50px;height:${height-112.5}px;overflow-y: scroll; `">
    <div class="" style="margin:24px 0px  15px 0px;">
      <van-row>
        <van-col span="18" class="flex">
          <div class="" style="width: 7px;height: 20px;background-color: #0580FF;margin-right: 11px;"> </div>
          <div class="f-15 f-bold c-0 flex-align"
            style="font-size: 15px;font-weight: bold;color: #000000;font-family: auto">
            <span>自营与联合总收入:</span><span class="c-lanse">
              {{IncomeList.allTotal}}
            </span>
            <span class="">
              元
            </span>
          </div>
        </van-col>

      </van-row>
    </div>
    <div id="" style="margin-bottom: 15px;">

    </div>
    <div class="bg-f" style="padding: 15px 10px 15px 10px;margin-bottom: 15px;">
      <div class="flex-space" style="margin-bottom: 5px;">
        <div class="c-lanse c-15 f-bold flex-c" style="width: 102px;height: 30px;    font-size: 15px; ">
          今日收入
        </div>
        <div id="">
          <div class="flex-c c-ffffff  "
            style="width: 102px;height: 30px;background: #0580FF;border-radius: 5px 5px 0px 0px;position: relative;font-size: 13px;font-weight: 500;font-family: auto;">
            台数(台)
          </div>
          <div class="kailong"
            style="width:0;height:0;border-right:10px solid transparent;border-left:10px solid transparent;border-top:6px solid #0580FF;margin: auto;">
          </div>
        </div>
        <div id="">
          <div class="flex-c c-ffffff  "
            style="width: 102px;height: 30px;background: #15C78B;border-radius: 5px 5px 0px 0px;font-size: 13px;font-weight: 500;font-family: auto;">
            收入(元)
          </div>
          <div class="kailong"
            style="width:0;height:0;border-right:10px solid transparent;border-left:10px solid transparent;border-top:6px solid #15C78B;margin: auto;">
          </div>
        </div>

      </div>

      <div class="flex-space " style="margin-bottom: 5px;">
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;background-color: #F1F1F1;">
          自营
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.stodayTerminalCount}}
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.selfoperatedToday}}
        </div>
      </div>
      <div class="flex-space " style="margin-bottom: 5px;">
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;background-color: #F1F1F1;">
          联合
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.utodayTerminalCount}}
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.unitedToday}}
        </div>
      </div>
      <div class="flex-space " style="margin-bottom: 5px;">
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;background-color: #F1F1F1;">
          共计
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.todayTerminalCount}}
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.todayTotal}}
        </div>
      </div>

    </div>


    <div class="bg-f" style="padding: 15px 10px 15px 10px;margin-bottom: 15px;">
      <div class="flex-space" style="margin-bottom: 5px;">
        <div class="c-15 f-bold flex-c" style="width: 102px;height: 30px;color: #F7141D; font-size: 15px; ">
          今日之前收入
        </div>
        <div id="">
          <div class="flex-c c-ffffff "
            style="width: 102px;height: 30px;background: #0580FF;border-radius: 5px 5px 0px 0px;position: relative;font-size: 13px;font-weight: 500;font-family: auto;">
            台数(台)
          </div>
          <div class="kailong"
            style="width:0;height:0;border-right:10px solid transparent;border-left:10px solid transparent;border-top:6px solid #0580FF;margin: auto;">
          </div>
        </div>
        <div id="">
          <div class="flex-c c-ffffff "
            style="width: 102px;height: 30px;background: #15C78B;border-radius: 5px 5px 0px 0px;font-size: 13px;font-weight: 500;font-family: auto;">
            收入(元)
          </div>
          <div class="kailong"
            style="width:0;height:0;border-right:10px solid transparent;border-left:10px solid transparent;border-top:6px solid #15C78B;margin: auto;">
          </div>
        </div>
      </div>

      <div class="flex-space " style="margin-bottom: 5px;">
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;background-color: #F1F1F1;">
          自营
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.sterminalCount}}
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.selfoperated}}
        </div>
      </div>
      <div class="flex-space " style="margin-bottom: 5px;">
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;background-color: #F1F1F1;">
          联合
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.uterminalCount}}
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.united}}
        </div>
      </div>
      <div class="flex-space " style="margin-bottom: 5px;">
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;background-color: #F1F1F1;">
          共计
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.terminalCount}}
        </div>
        <div class="flex-c f-500 f-13 c-0" style="width: 102px;height: 30px;border: 1px solid #F1F1F1;">
          {{IncomeList.total}}
        </div>
      </div>

    </div>
    <div id="" style="margin-bottom: 15px;">
      <van-row>
        <van-col span="24" class="flex">
          <div class="" style="width: 7px;height: 20px;background-color: #0580FF;margin-right: 11px;"> </div>
          <div class="flex-align" style="font-size: 15px;font-weight: bold;color: #000000;font-family: auto">
            买断设备收入:<span class="c-lanse">{{BuyoutIncomeList.income}}</span><span>元</span>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>
<script>
  // 自营与联合收入
  import {
    IncomeDetails
  } from '@/api/friends/IncomeDetails.js'
  // 买断设备收入
  import {
    BuyoutIncome
  } from '@/api/friends/BuyoutIncome.js'
  export default {
    data() {
      return {
        height: 100,
        // seleactivenum: 0,
        IncomeList: {},
        BuyoutIncomeList: {}
      }
    },
    created() {
      this.Income();
      this.BuyoutIn();
    },
    methods: {
      Income() {
        IncomeDetails().then(res => {
          console.log(res, '自营与联合收入')
          this.IncomeList = res.data;
        })
      },
      BuyoutIn() {
        BuyoutIncome().then(res => {
          this.BuyoutIncomeList = res.data;
          console.log(res, '买断设备收入')
        })
      },
      client() {
        this.$nextTick(() => {
          this.height = document.body.clientHeight;
          // console.log(this.height, '位置')
        });
      },
      // seleactive(num) {
      // 	this.seleactivenum = num;
      // }
    },
    mounted() {
      this.client() //获取高度
    }
  }
</script>
<style scoped>
  .friends {
    margin: 0px 15px;
    height: 100vh;
  }

  .selewd {
    font-family: system-ui;
    font-weight: 500;
    font-size: 13px;
    color: #000000;
  }

  .noselewd {
    font-family: system-ui;
    font-weight: 500;
    font-size: 13px;
    color: #BBBBBB;
  }

  .f-bold {
    font-family: system-ui;
    font-weight: bold;
  }

  .f-500 {
    font-family: system-ui;
    font-weight: 500;
  }

  .f-12 {
    font-size: 12px;
  }

  .f-13 {
    font-size: 13px;
  }

  .f-15 {
    font-size: 15px;
  }

  .f-22 {
    font-size: 22px;
  }

  .c-0 {
    color: #000000;
  }

  .c-ffffff {
    color: #FFFFFF;
  }

  .c-lanse {
    color: #0580FF;
  }

  .c-BBBBBB {
    color: #BBBBBB;
  }

  .c-15C78B {
    color: #15C78B;
  }

  .bg-f {
    border-radius: 5px;
    background-color: #FFFFFF;
  }
</style>
